<template>
<div>
  <h3>秒杀</h3>
</div>
  <div class="forrrm">
    <div class="n">
      名称
      <el-input v-model="input" placeholder="请输入" />
    </div>
    <el-form :model="form" label-width="120px">
      <el-form-item label="状态">
        <el-select placeholder="请选择使用状态">
          <el-option label="全部" value="shanghai" />
          <el-option label="未开始" value="beijing" />
          <el-option label="进行中" value="beijing" />
          <el-option label="已结束" value="beijing" />
        </el-select>  
      </el-form-item>
    </el-form>
    <el-row class="mb-4">
      <el-button type="primary" @click="searchFn">查询</el-button>
      <el-button>重置</el-button>
    </el-row>
  </div>
  <div>
    <el-table
      ref="multipleTableRef"
      :data="tableData"
      style="width: 100%"
      @selection-change="handleSelectionChange"

    >
      <el-table-column type="selection" width="55" />
      <el-table-column label="活动名称" width="120">
        <template #default="scope">{{ scope.row.date }}</template>
      </el-table-column>

      <el-table-column property="originalCost" label="原价(元)" width="120" />
      <el-table-column property="discountPrice" label="折扣价(元)" width="120" />
      <el-table-column property="stock" label="库存" width="120" />
      <el-table-column property="ActivityStatus" label="活动状态" width="120" />
      <el-table-column property="termofvalidity" label="有效期" width="120" />
      <!-- <el-table-column property="name" label="操作" width="120" /> -->
    </el-table>
  </div>
</template>
<script setup lang="ts">

// import axios from "axios";
// let service = axios.create();
// export default {
//   data() {
//     return {
//       xianshizhekou: [],
//     };
//   },

//   mounted() {
//     service({
//       url: " http://localhost:3000/xianshizhekou",
//       method: "get"
//     }).then(res => {
//       res.data.forEach(element => {
//         this.xianshizhekou.push(element);
//       })
//     });
//   },
// };


import { reactive } from "vue";
import service from "../../../utils/request";

const searchFn = () => {
    service({
        url: "/pro/searchPro",
        method: "post",
        data: `category=${URLSearchParams.input}&search=${URLSearchParams.input}`
    })
        .then(res => {
            if (res.data.code === "200") {
                list.length = 0;
                list.push(...res.data.data);
                console.log("list", list);
            }
        })
}
searchFn()

// import { ref } from "vue";
// const input = ref("");
// import { reactive } from "vue";

// // do not use same name with ref
// const form = reactive({
//   name: "",
//   region: "",
//   date1: "",
//   date2: "",
//   delivery: false,
//   type: [],
//   resource: "",
//   desc: "",
// });

// const onSubmit = () => {
//   console.log("submit!");
// };

// import { ref } from 'vue'
// import { ElTable } from 'element-plus'

// interface User {
//   date: string
//   name: string
//   address: string
// }

// const multipleTableRef = ref<InstanceType<typeof ElTable>>()
// const multipleSelection = ref<User[]>([])
// const toggleSelection = (rows?: User[]) => {
//   if (rows) {
//     rows.forEach((row) => {
//       // TODO: improvement typing when refactor table
//       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
//       // @ts-expect-error
//       multipleTableRef.value!.toggleRowSelection(row, undefined)
//     })
//   } else {
//     multipleTableRef.value!.clearSelection()
//   }
// }
// const handleSelectionChange = (val: User[]) => {
//   multipleSelection.value = val
// }
//
</script>
 <style scoped>
.xian {
  border: 0.3px rgba(200, 199, 199, 0.373) solid;
  border-bottom: none;
}
h3 {
  height: 80px;
  line-height: 80px;
  margin-left: 20px;
}
.el-dropdown-link {
  border: 0.3px rgba(200, 199, 199, 0.373) solid;
}
.n {
  float: left;
  /* margin-left: 40px; */
}
.el-input {
  width: 200px;
}
.forrrm {
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  border: 0.3px rgba(180, 177, 177, 0.556) solid;
  margin-bottom: 20px;
}
.el-form-item {
  line-height: 80px;
}
.el-form {
  width: 600px;
  margin-top: 22px;
  line-height: 80px;
}
.el-row {
  float: right;
}
</style>